<template>
  <div class="login-top">
    <img src="../../assets/cjx/c1.jpg" alt="" class="login-top-img1">
  </div>
  <div class="login">
    <div class="login-input">
      <van-form @submit="log" @failed="onFailed">
        <van-cell-group inset>
          <!-- 通过 pattern 进行正则校验 -->
          <van-field
            v-model="value1"
            name="pattern"
            placeholder="请输入账号"
            :rules="[{ pattern, message: '账号不正确' }]"
          />
          <!-- 通过 validator 进行函数校验 -->
          <van-field
            v-model="value2"
            type="password"
            class="login-underline"
            name="validator"
            placeholder="请输入6-10位数密码"
            :rules="[{ validator, message: '密码不正确' }]"
          />
        </van-cell-group>
        <span @click="register">
          注册
        </span>
        <div style="margin: 16px;">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            class="login-button"
          >
            登录
          </van-button>
        </div>
      </van-form>
      <van-divider :style="{ color: '#c6c6c6', borderColor: '#c6c6c6', padding: '0 16px' }">
        其他方式登录
      </van-divider>
      <div class="login-wechat">
        <img src="../../assets/cjx/QQ截图20230418113515.png" alt="" @click="wechat">
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { closeToast, showLoadingToast } from 'vant'
import { useRouter } from 'vue-router'
import values from '../register/index.vue'

const route = useRouter()

const onFailed = () => {
  console.log()
}

const wechat = () => {
  console.log('微信')
}
const register = () => {
  console.log('注册')
  route.push('/register')
}
const log = () => {
  console.log('登录')
  route.push('/home')
}
console.log(values)
const value1 = ref('')
const value2 = ref('')
const pattern = /\d{6}/

// 校验函数返回 true 表示校验通过，false 表示不通过
const validator = (val:any) => /\d{6,10}/.test(val)

// 校验函数可以直接返回一段错误提示
const validatorMessage = (val:any) => `${val} 不合法，请重新输入`

</script>

<style lang="less" scoped>
html,body{
  width: 100%;
  height: 100%;
}

.login{
  height: 100%;
background: #ffffff;
overflow: hidden;
}

.login-top-img1{
  width: 100%;
  display: block;

}

.login-input{
  margin-top: 20px;
}

.login-button{
  background: #f5ca2b;
  border: 0;
  color: black;
  margin-top: 30px;
  margin-bottom: 60px;
}
span{
  display: block;
  height: 10px;
  margin-top: 20px;
  color: #f5ca2b;
  font-size: 12px;
  margin-left: 330px;
}

.login-underline{
border-bottom: 1px solid #f8f8f8;
}

.login-wechat{
  width: 100%;
  height: 30px;
  text-align: center;
}

</style>
